<template>
    <div class="">
        <el-drawer :before-close="drawerClose" :close-on-press-escape="false" :size="width"
                   :visible.sync="isDrawer" :with-header="false" :wrapper-closable="false" append-to-body>
            <!-- 自定义头部样式 -->
            <div class="drawerHeader" v-if="isShowHeader">
                <myTitleName :titleName="title" :titleIcon="require('@/assets/images/components/drawer/titleIcon2.png')">
                    <template slot="titleRight">
                        <img @click="drawerClose" alt="" src="@/assets/images/icon/icon-close.png">
                    </template>
                </myTitleName>
                <div class="headerLine"></div>
            </div>
            <!-- 内容 -->
            <div :style="{'padding':isShowHeader?'16px 16px 16px 24px':''}"
                 class="content">
                <slot name="content"></slot>
            </div>
            <!-- 底部操作 -->
            <div class="footer"
                 v-if="isFooter || ($slots.footer && Array.isArray($slots.footer) && $slots.footer.length)">
                <slot name="footer"></slot>
                <!-- <el-button>取 消</el-button>
                <el-button type="primary">确 定</el-button> -->
            </div>
        </el-drawer>
    </div>
</template>

<script>

export default {
  props: {
    isFooter: {
      type: Boolean,
      default: false
    },
    isDrawer: {
      type: Boolean,
      default: false
    },
    isShowHeader: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '默认标题'
    },
    width: {
      type: String,
      default: '30%'
    },
    background: '',
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    drawerClose() {
      this.$emit('drawerClose')
    }
  },
}
</script>

<style lang="scss" scoped>
    // 自定义头部样式
    .drawerHeader {
        padding: 18px 16px;
        background: #185678;
        color: #97DDFB;
        img {
            cursor: pointer;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
        }

        .headerLine {
            display: none;
            width: 100%;
            height: 2px;
            margin-top: 18px;
            background: #E9F3FD;
        }
    }

    .drawer-title {
        display: flex;
        flex-flow: row;
        align-items: center;


        img {
            width: 34px;
            height: 34px;
            margin-right: 6px;
        }

        div {
            color: rgba(12, 123, 242, 1);
            font-family: OPPOSans;
            font-weight: bold;
            font-size: 18px;
        }
    }

    .content {
        padding: 24px;
        flex: 1;
        overflow: auto;
    }

    .footer {
        padding: 10px 20px;
        display: flex;
        justify-content: center;
        // padding-bottom: 80px;
        // border-top: 1px solid #DCDFE6;
        // background: #E9F3FD;
        // background: rgba(0, 0, 0, .1);
    }

    /deep/ .el-drawer__header {
        margin-bottom: 0px;
        padding: 17px 20px;
        // background-image: url('../../../assets/images/headDialog.png');
        // background-repeat: no-repeat;
        // background-position:center;
        // background-size: 100% 100%;
        // background-size: cover;
        background: #f5f6f8;
        color: #2a3347;
        border-bottom: 1px solid #ddd;
    }

    /deep/ .el-drawer__body {
        display: flex;
        flex-direction: column;
        background-image: url('../../../assets/images/components/drawer/bj.png');
        background-repeat: no-repeat;
        background-position:center;
        background-size: cover;
        // background-size: 100% 100%;
    }

</style>
